<script>
import axios from 'axios';
//发送size和page，接受blogs和count
//export对应import
export default {
  // 使用data配置页面默认数据
  data() {
    return {
      // 博客列表数据
      blogs: [],
      // 当前页码
      currentPage: 1,
      // 总记录数
      count: 0,
      // 每页显示的记录数
      size: 10,
      dialogVisible3: true,
      formData: {
        id: '',
        user_id: '',
        title: '',
        description: '',
        content: '',
        status: '',
      },
    }
  },
  //配置页面执行时默认运行的方法
  methods: {
    // 获取指定页码的博客数据
    page(currentPage) {
      const _this = this;
      // 发送 GET 请求获取博客数据
      axios.get(`http://localhost:8080/api/blogs?page=${currentPage}&size=${this.size}`).then((res) => {
        //通过res.data获取返回的数据
        console.log(res.data); // 打印返回的数据
        _this.blogs = res.data.blogs; // 更新博客列表数据
        _this.count = res.data.count; // 更新总记录数
      });
    },
    editBlog(){
      axios.put('http://localhost:8080/api/blogs/update', this.formData)
          .then(response => {
            console.log('更新成功:', response.data);
            this.dialogVisible3 = false; // 关闭对话框
            this.fetchData(); // 重新获取数据，以显示新增的用户
          })
          .catch(error => {
            console.error('新增失败:', error);
          });
    },
    deleteBlog(id){
      //TODO
    },
    showDialog(action,blog) {
      // 根据action初始化formData，例如：
      if (action === '新增') {
        this.dialogVisible1 = true;
        this.formData = {  id: '',
          user_id: '',
          title: '',
          description: '',
          content: '',
          status: '', }; // 重置表单数据
      } if (action === '删除') {
        this.dialogVisible2 = true;
        this.formData = { id: '',
          user_id: '',
          title: '',
          description: '',
          content: '',
          status: '', };
      }if (action === '修改'&&blog!==null) {
        this.dialogVisible3 = true;
        this.formData = {  id: blog.id,
          user_id: '',
          title: '',
          description: '',
          content: '',
          status: '', };
      }
      // 如果是编辑，则根据当前选中的数据设置formData
    },
  },
  // 组件挂载后执行的方法
  mounted() {
    this.page(this.currentPage); // 初始化时获取第一页数据
  }
}
</script>

<template>
  <!-- 主容器，设置宽度和居中 -->
  <div class="m-container">
    <!-- 博客内容块 -->
    <div class="block">
      <!-- 使用v-for对blogs集合进行遍历 -->
      <div v-for="blog in blogs" :key="blog.id">
        <h3>{{ blog.title }}</h3>
        <p>{{ blog.content }}</p>
        <el-button type="primary" @click="showDialog('修改', blog)">Edit</el-button>
        <el-button type="danger" @click="deleteBlog(blog.id)">Delete</el-button>
      </div>
      <h4>
        当前是第：{{ currentPage }}页，每页{{ size }}篇,共{{ count }}篇
      </h4>
    <div>
      <el-dialog title="更新内容" :visible.sync="dialogVisible3" width="30%">
        <el-form :model="formData" label-width="80px">
          <el-form-item label="用户id">
            <el-input v-model="formData.user_id"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="formData.description"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="formData.content"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="formData.status"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editBlog">提交</el-button>
            <el-button @click="dialogVisible3 = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    </div>
  </div>
</template>

<style scoped>

</style>